<template>
    <div class="markdown-content" v-html="compiledMarkdown"></div>
  </template>
  
  <script>
  import { marked } from 'marked';
  import hljs from 'highlight.js';
  import 'highlight.js/styles/github.css'; // 选择代码高亮样式
  
  // 配置 marked
  marked.setOptions({
    highlight: (code, lang) => hljs.highlight(lang || 'plaintext', code).value,
    breaks: true
  });
  
  export default {
    data() {
      return {
        compiledMarkdown: ''
      };
    },
    async mounted() {
      // 调用后端 API 获取 Markdown 文件内容
      const response = await fetch('http://localhost:9999/test/testMarkdown'); // 替换为你的后端地址
      const raw = await response.text();
  
      // 将 Markdown 解析为 HTML
      this.compiledMarkdown = marked(raw);
    }
  };
  </script>
  
  <style>
  .markdown-content {
    /* 自定义 Markdown 样式 */
  }
  </style>